<template>
	<view class="container">
		<!-- 标题区域 -->
		<view class="title-area">
			<text class="title">培训记录</text>
			<text class="subtitle">高效记录培训历程，助力教师专业成长</text>
		</view>

		<!-- 主卡片 -->
		<view class="card">

			<!-- 基本信息部分 -->
			<view class="section">
				<view class="section-header">
					<view class="circle">1</view>
					<text class="section-title">培训基本信息</text>
				</view>
				<view class="divider"></view>

				<view class="form-grid">
					<view class="form-item">
						<text class="label">培训主题</text>
						<input v-model="form.topic" placeholder="请输入培训主题" class="input" />
					</view>
					<view class="form-item">
						<text class="label">培训日期</text>
						<picker mode="date" :value="form.date" @change="bindDateChange" class="date-picker">
							<view class="picker-content">
								<text class="picker-text">{{form.date || '请选择日期'}}</text>
								<text class="picker-icon">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="label">培训人数</text>
						<input v-model.number="form.count" type="number" min="1" placeholder="参与教师人数" class="input" />
					</view>
					<view class="form-item">
						<text class="label">培训地点</text>
						<input v-model="form.location" placeholder="请输入培训地点" class="input" />
					</view>
				</view>
			</view>

			<!-- 培训详情部分 -->
			<view class="section">
				<view class="section-header">
					<view class="circle">2</view>
					<text class="section-title">培训实施情况</text>
				</view>
				<view class="divider"></view>

				<view class="form-detail">
					<view class="form-item full-width">
						<text class="label">培训内容摘要</text>
						<textarea v-model="form.summary" placeholder="请简要描述培训的主要内容..." class="textarea" />
					</view>

					<view class="form-item full-width">
						<text class="label">学员反馈评分</text>
						<view class="star-rating">
							<text v-for="star in 5" :key="star" class="star" :class="{'active': star <= form.rating}"
								@click="setRating(star)">★</text>
						</view>
						<text class="hint">点击星星进行评分</text>
					</view>

					<view class="form-item full-width">
						<text class="label">现场照片记录</text>
						<view class="file-upload" @click="chooseImage">
							<text class="upload-icon">📤</text>
							<text class="upload-text">点击上传照片</text>
							<text class="upload-subtext">支持JPG、PNG格式，最多10张</text>
						</view>

						<view class="preview-container">
							<view v-for="(img, index) in images" :key="index" class="preview-item">
								<image :src="img" mode="aspectFill" class="preview-img" />
								<view class="delete-btn" @click.stop="removeImage(index)">×</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="btn-area">
				<button class="btn-submit" @click="submitForm">
					保存提交
				</button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		feedBackScore,
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				form: {
					topic: '',
					date: '',
					count: null,
					location: '',
					summar: '',
					rating: 0,
				},
				images: [], // 本地预览图片路径
				uploadedImages: [], // 已上传成功的图片URL
				projectId: '', // 从URL参数获取的项目ID
				isUploading: false // 防止重复提交
			}
		},
		onLoad(options) {
			this.projectId = options.projectId;
		},
		methods: {
			bindDateChange(e) {
				this.form.date = e.detail.value;
			},
			setRating(star) {
				this.form.rating = star;
			},
			chooseImage() {
				// 使用 uni.chooseImage 选择图片
				uni.chooseImage({
					count: 10 - this.images.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 合并已有图片，不超过10张
						this.images = this.images.concat(res.tempFilePaths).slice(0, 10);
						// 上传新选择的图片
						this.uploadImages(res.tempFilePaths);
					}
				});
			},
			// 上传图片方法
			uploadImages(tempFilePaths) {
				const uploadTasks = tempFilePaths.map(filePath => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'https://applet.eapchina.net/api/sleep/uploadFile',
							filePath: filePath,
							name: 'file',
							success: (uploadRes) => {
								const data = JSON.parse(uploadRes.data);
								if (data.imgUrl) {
									resolve(data.imgUrl);
								} else {
									reject(new Error('上传失败'));
								}
							},
							fail: (err) => {
								console.error('上传失败:', err);
								reject(err);
							}
						});
					});
				});

				uni.showLoading({
					title: '图片上传中...'
				});

				Promise.all(uploadTasks)
					.then(urls => {
						this.uploadedImages = [...this.uploadedImages, ...urls];
						uni.hideLoading();
						uni.showToast({
							title: '照片上传成功',
							icon: 'success'
						});
					})
					.catch(err => {
						console.error('部分图片上传失败:', err);
						uni.hideLoading();
						uni.showToast({
							title: '部分图片上传失败',
							icon: 'none'
						});
					});
			},
			removeImage(index) {
				this.images.splice(index, 1);
				this.uploadedImages.splice(index, 1);
			},
			validateForm() {
				if (!this.form.topic) {
					uni.showToast({
						title: '请填写培训主题',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.date) {
					uni.showToast({
						title: '请选择培训日期',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.count || this.form.count <= 0) {
					uni.showToast({
						title: '请填写正确的培训人数',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.location) {
					uni.showToast({
						title: '请填写培训地点',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.summary) {
					uni.showToast({
						title: '请填写培训内容摘要',
						icon: 'none'
					});
					return false;
				}
				if (this.form.rating === 0) {
					uni.showToast({
						title: '请为培训评分',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			async submitForm() {
				if (this.isUploading) return;

				if (!this.validateForm()) return;

				this.isUploading = true;
				uni.showLoading({
					title: '提交中...'
				});

				try {
					// 确保所有图片都已上传
					if (this.images.length > this.uploadedImages.length) {
						const remainingImages = this.images.slice(this.uploadedImages.length);
						await this.uploadImages(remainingImages);
					}

					// 准备提交数据
					let data = {
						projectId: this.projectId,
						title: this.form.topic,
						trainingTime: this.form.date,
						peoples: this.form.count,
						location: this.form.location,
						trainingInfo: this.form.summary,
						score: this.form.rating + 1,
						imgUrl: this.uploadedImages.join(',') // 多张图片用逗号分隔
					}

					// 调用接口
					const res = await feedBackScore(data);

					if (res.state == "ok") {
						uni.hideLoading();
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});

						// 返回上一页或跳转到其他页面
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}

				} catch (err) {
					console.error('提交失败:', err);
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isUploading = false;
				}
			}
		}
	}
</script>

<style scoped>
	/* 容器 */
	.container {
		padding: 20rpx;
		background-color: #f8fafc;
		min-height: 100vh;
		color: #1e293b;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		box-sizing: border-box;
	}

	/* 标题区域 */
	.title-area {
		text-align: center;
		margin-bottom: 30rpx;
		padding: 10rpx 0;
	}

	.title {
		font-weight: 600;
		font-size: 36rpx;
		color: #334155;
		margin-bottom: 10rpx;
		display: block;
	}

	.subtitle {
		font-size: 24rpx;
		color: #64748b;
		display: block;
	}

	/* 卡片 */
	.card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
	}

	/* 分段标题 */
	.section {
		margin-bottom: 40rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.circle {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		background-color: #dbeafe;
		color: #3b82f6;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16rpx;
		font-size: 26rpx;
	}

	.section-title {
		font-weight: 600;
		font-size: 30rpx;
		color: #334155;
	}

	/* 分割线 */
	.divider {
		height: 2rpx;
		background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.5) 50%, rgba(59, 130, 246, 0.1) 100%);
		position: relative;
		margin: 20rpx 0;
	}

	.divider::after {
		content: "";
		position: absolute;
		top: -8rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 16rpx;
		height: 16rpx;
		background-color: #3b82f6;
		border-radius: 50%;
	}

	/* 表单网格 */
	.form-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.form-item {
		flex: 1 1 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	.form-item.full-width {
		flex-basis: 100%;
	}

	/* 标签 */
	.label {
		font-size: 26rpx;
		font-weight: 500;
		color: #475569;
		margin-bottom: 12rpx;
	}

	/* 输入框 */
	.input {
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e2e8f0;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #334155;
		background-color: #f8fafc;
	}

	/* 日期选择器 */
	.date-picker {
		width: 100%;
	}

	.picker-content {
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e2e8f0;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #334155;
		background-color: #f8fafc;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.picker-text {
		color: #334155;
	}

	.picker-text:empty::before {
		content: '请选择日期';
		color: #94a3b8;
	}

	.picker-icon {
		color: #94a3b8;
		font-size: 24rpx;
	}

	/* 多行文本 */
	.textarea {
		min-height: 200rpx;
		padding: 20rpx;
		border: 1rpx solid #e2e8f0;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #334155;
		background-color: #f8fafc;
		line-height: 1.5;
	}

	/* 星级评分 */
	.star-rating {
		display: flex;
		gap: 10rpx;
		margin-bottom: 10rpx;
	}

	.star {
		font-size: 50rpx;
		color: #e2e8f0;
	}

	.star.active {
		color: #facc15;
	}

	.hint {
		font-size: 24rpx;
		color: #94a3b8;
	}

	/* 文件上传区域 */
	.file-upload {
		border: 2rpx dashed #cbd5e1;
		border-radius: 16rpx;
		padding: 60rpx 0;
		text-align: center;
		color: #64748b;
		background-color: #f8fafc;
		margin-top: 10rpx;
	}

	.upload-icon {
		font-size: 60rpx;
		margin-bottom: 20rpx;
		display: block;
	}

	.upload-text {
		font-weight: 500;
		font-size: 28rpx;
		margin-bottom: 8rpx;
		display: block;
	}

	.upload-subtext {
		font-size: 24rpx;
		color: #94a3b8;
		display: block;
	}

	/* 预览容器 */
	.preview-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.preview-item {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.preview-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 删除按钮 */
	.delete-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #ef4444;
		color: #fff;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		font-size: 30rpx;
		line-height: 36rpx;
		text-align: center;
	}

	/* 提交按钮区域 */
	.btn-area {
		margin-top: 40rpx;
	}

	.btn-submit {
		background-color: #3b82f6;
		color: #fff;
		font-weight: 500;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 12rpx;
		width: 100%;
	}
</style>